import { View } from "@tarojs/components"

import { Popup } from '@antmjs/vantui'
import { forwardRef, useEffect, useState } from "react";

import useInitAction from "@/hooks/useInitAction";
import { IChannelCategoriesItem } from "@/typing";
import Taro from "@tarojs/taro";
import { STORE_KEY } from "@/common/config";
import { showToast } from "@/common/util";
// import { handleShopChannelCategories } from "@/common/service";

interface IJobDialog {
    show: boolean;
    channelCategoriesList: Array<IChannelCategoriesItem>;
    handlePopStatus: (status) => void;
    handleConfirm: (idList: number[]) => void;

}
const JobDialog: React.FC<IJobDialog> = forwardRef((props, refs) => {

    const { show, channelCategoriesList, handlePopStatus, handleConfirm } = props
    const [jobIdList, setJobList] = useState<number[]>([])
    const { bottomSafeHeight } = useInitAction()



    const handlehideNoticePop = () => {
        handlePopStatus(false)
    }

    const handleInitJobList = () => {
        const storeJobList = JSON.parse(Taro.getStorageSync(STORE_KEY.JOB_ID_LIST) || '[]')
        if (storeJobList.length > 0) {
           
            setJobList(storeJobList)
        }
    }
    const handleClickJob = (job) => {
        const hasAdd = jobIdList.includes(job.id);

        if (jobIdList.length === 5 && !hasAdd) {
            showToast('最多选择5个')
            return;
        }
        // showToast(job.name)
        let updatedJobList;
        if (!hasAdd) {
            showToast(job.name)
            updatedJobList = [...jobIdList, job.id];
        } else {
            updatedJobList = jobIdList.filter(id => id !== job.id);
        }
        setJobList(updatedJobList);
    }

    const handleReset = () => {
        setJobList([])
        // Taro.setStorageSync(STORE_KEY.JOB_ID_LIST, JSON.stringify([]))
        // Taro.setStorageSync(STORE_KEY.JOB_ID_DESC, JSON.stringify([]))

    }
    const handleConfirmAction = () => {
        console.log( jobIdList)
        handleConfirm(jobIdList)
    }

    useEffect(() => {
        if (show) {
            handleInitJobList();
        }
    }, [show])
    return (
     
        <Popup show={show} position="bottom" onClose={handlehideNoticePop} safeAreaInsetBottom={false} style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : '90rpx' }}>
        <View className="pt-56px  box-border max-h-80vh overflow-y-scroll pb-100px">
            <>
                {channelCategoriesList.map((item, index) => {
                    return (
                        <View className="mb-24px" key={index}>
                            <View className="text-#161618 text-34px font-bold px-42px">{item.name}</View>
                            <View className="mt-34px flex flex-wrap flex items-center pl-42px ">
                                {item.jobType.map((job, jobIndex) => {
                                    const isSelected = jobIdList.includes(job.id);
                                    return (
                                        <View
                                            key={jobIndex}
                                            className={`w-186px  h-72px border-2px border-solid ${isSelected
                                                ? "border-#8232E8 text-#8232E8"  // 选中时的样式
                                                : "border-#CCCCCC text-#333333"  // 默认样式
                                                }  text-28px box-border px-10px text-center leading-72px mb-26px mr-50px  line-clamp-1`}
                                            onClick={() => handleClickJob(job)}
                                        >{job.name}</View>
                                    )
                                })}




                            </View>
                        </View>
                    )
                })}



            </>
            <View className="box-border px-80px flex items-center justify-between pt-20px fixed left-0 z-10 w-full bg-#fff" style={{ bottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : '90rpx' }}>
                <View className="w-272px h-92px text-#333333 text-28px font-medium bg-#F5F5F5 flex items-center justify-center" onClick={handleReset}>重置</View>
                <View className="w-272px h-92px text-#FFFFFF text-28px font-medium bg-#8232E8 flex items-center justify-center" onClick={handleConfirmAction}>完成</View>

            </View>

        </View>
    </Popup>
    )

})
export default JobDialog;